<template>
  <div class="calendar">
    <div>
      <div class="calendar-tools">
                <span class="calendar-prev" @click="prev">
                    <svg width="20" height="20" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
                         xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g class="transform-group">
                        <g transform="scale(0.015625, 0.015625)">
                            <path
                              d="M671.968 912c-12.288 0-24.576-4.672-33.952-14.048L286.048 545.984c-18.752-18.72-18.752-49.12 0-67.872l351.968-352c18.752-18.752 49.12-18.752 67.872 0 18.752 18.72 18.752 49.12 0 67.872l-318.016 318.048 318.016 318.016c18.752 18.752 18.752 49.12 0 67.872C696.544 907.328 684.256 912 671.968 912z"
                              fill="#5e7a88"></path>
                        </g>
                    </g>
                    </svg>
                </span>
        <span class="calendar-next" @click="next">
                    <svg width="20" height="20" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
                         xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g class="transform-group">
                        <g transform="scale(0.015625, 0.015625)">
                            <path
                              d="M761.056 532.128c0.512-0.992 1.344-1.824 1.792-2.848 8.8-18.304 5.92-40.704-9.664-55.424L399.936 139.744c-19.264-18.208-49.632-17.344-67.872 1.888-18.208 19.264-17.376 49.632 1.888 67.872l316.96 299.84-315.712 304.288c-19.072 18.4-19.648 48.768-1.248 67.872 9.408 9.792 21.984 14.688 34.56 14.688 12 0 24-4.48 33.312-13.44l350.048-337.376c0.672-0.672 0.928-1.6 1.6-2.304 0.512-0.48 1.056-0.832 1.568-1.344C757.76 538.88 759.2 535.392 761.056 532.128z"
                              fill="#5e7a88"></path>
                        </g>
                    </g>
                    </svg>
                </span>
        <div class="calendar-info">
          <!-- {{monthString}} -->
          <div class="month">
            <div class="month-inner" :style="{'top':-(this.month*20)+'px'}">
              <span v-for="m in months">{{m}}</span>
            </div>
          </div>
          <div class="year">{{year}}</div>
        </div>
      </div>
      <table cellpadding="5">
        <thead>
        <tr>
          <td v-for="week in weeks" class="week">{{week}}</td>
        </tr>
        </thead>
        <tr v-for="(day,k1) in days">
          <td v-for="(child,k2) in day" :class="{'selected':child.selected,'disabled':child.disabled}"
              @click="selectM(k1,k2,$event)">
            <span :class="{'red':k2==0||k2==6}">{{child.day}}</span>
            <div class="text" v-if="child.eventName!=undefined">{{child.eventName}}</div>
          </td>
        </tr>
      </table>
    </div>


  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      value: {
        type: Array,
        default: function () {
          return []
        }
      },
      begin: {
        type: Array,
        default: function () {
          return []
        }
      },
      end: {
        type: Array,
        default: function () {
          return []
        }
      },
      range: {
        type: Boolean,
        default: false
      },
      zero: {
        type: Boolean,
        default: false
      },
      weeks: {
        type: Array,
        default: function () {
          return window.navigator.language.toLowerCase() === 'zh-cn' ? ['日', '一', '二', '三', '四', '五', '六'] : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        }
      },
      months: {
        type: Array,
        default: function () {
          return window.navigator.language.toLowerCase() === 'zh-cn' ? ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
        }
      },
      events: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    data () {
      return {
        year: 0,
        month: 0,
        day: 0,
        days: [],
        today: [],
        rangeBegin: [],
        rangeEnd: []
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      // 初始化一些东西
      init () {
        let now = new Date()
        // 没有默认值
        this.year = now.getFullYear()
        this.month = now.getMonth()
        this.day = now.getDate()
        if (this.value.length > 0) {
          if (this.range) {
            this.year = parseInt(this.value[0][0])
            this.month = parseInt(this.value[0][1]) - 1
            this.day = parseInt(this.value[0][2])

            let year2 = parseInt(this.value[1][0])
            let month2 = parseInt(this.value[1][1]) - 1
            let day2 = parseInt(this.value[1][2])

            this.rangeBegin = [this.year, this.month, this.day]
            this.rangeEnd = [year2, month2, day2]
            // console.log(this.month,this.rangeBegin,this.rangeEnd)
          } else {
            this.year = parseInt(this.value[0])
            this.month = parseInt(this.value[1]) - 1
            this.day = parseInt(this.value[2])
          }
        }
        this.render(this.year, this.month)
      },
      // 渲染日期
      render (y, m) {
        let firstDayOfMonth = new Date(y, m, 1).getDay()         // 当月第一天
        let lastDateOfMonth = new Date(y, m + 1, 0).getDate()    // 当月最后一天
        let lastDayOfLastMonth = new Date(y, m, 0).getDate()     // 最后一月的最后一天
        this.year = y
        let i = 0
        var line = 0
        var temp = []
        for (i = 1; i <= lastDateOfMonth; i++) {
          let dow = new Date(y, m, i).getDay()
          let k
          // 第一行
          if (dow === 0) {
            temp[line] = []
          } else if (i === 1) {
            temp[line] = []
            k = lastDayOfLastMonth - firstDayOfMonth + 1
            for (let j = 0; j < firstDayOfMonth; j++) {
              // console.log('第一行',lunarYear,lunarMonth,lunarValue,lunarInfo)
              temp[line].push(Object.assign(
                {day: k, disabled: true},
                this.getEvents(this.month === 0 ? this.year - 1 : this.year, this.month === 0 ? 12 : this.month, k),
              ))
              k++
            }
          }

          // 范围
          if (this.range) {
            // console.log('日期范围',this.getLunarInfo(this.year,this.month+1,i))
            var nowY = new Date().getFullYear()
            var nowm = new Date().getMonth()
            var nowd = new Date().getDate()
            var bol = (new Date(y, m, i)) < (new Date(nowY, nowm, nowd))
            let options
            if (bol) {
              options = Object.assign(
                {day: i, disabled: true},
                this.getEvents(this.year, this.month + 1, i)
              )
            } else {
              options = Object.assign(
                {day: i},
                this.getEvents(this.year, this.month + 1, i)
              )
            }
            if (this.rangeBegin.length > 0) {
              let beginTime = ''
              for (var count = 0; count < this.rangeBegin.length; count++) {
                beginTime = Number(new Date(this.rangeBegin[count][0], this.rangeBegin[count][1], this.rangeBegin[count][2]))
                let stepTime = Number(new Date(this.year, this.month, i))
                if (beginTime <= stepTime && beginTime >= stepTime) {
                  options.selected = true
                }
                if (this.begin.length > 0) {
                  let beginTime = Number(new Date(parseInt(this.begin[0]), parseInt(this.begin[1]) - 1, parseInt(this.begin[2])))
                  if (beginTime > Number(new Date(this.year, this.month, i))) options.disabled = true
                }
              }
            }
            temp[line].push(options)
          }
          // 最后一行
          if (dow === 6) {
            line++
          } else if (i === lastDateOfMonth) {
            let k = 1
            for (dow; dow < 6; dow++) {
              // console.log('最后一行',lunarYear,lunarMonth,lunarValue,lunarInfo)
              temp[line].push(Object.assign(
                {day: k, disabled: true},
                this.getEvents(this.month + 2 > 11 ? this.year + 1 : this.year, this.month + 2 > 11 ? 1 : this.month + 2, k)
              ))
              k++
            }
          }
        }  // end for
        this.days = temp
      },
      // 获取自定义事件
      getEvents (y, m, d) {
        if (Object.keys(this.events).length === 0) return false
        if (this.events[y + '-' + m + '-' + d] !== undefined) {
          return {
            eventName: this.events[y + '-' + m + '-' + d]
          }
        }
        return {}
      },
      // 上月
      prev (e) {
        e.stopPropagation()
        if (this.month === 0) {
          this.month = 11
          this.year = parseInt(this.year) - 1
        } else {
          this.month = parseInt(this.month) - 1
        }
        this.render(this.year, this.month)
      },
      //  下月
      next (e) {
        e.stopPropagation()
        if (this.month === 11) {
          this.month = 0
          this.year = parseInt(this.year) + 1
        } else {
          this.month = parseInt(this.month) + 1
        }
        this.render(this.year, this.month)
      },
      // 选中日期
      selectM (k1, k2, e) {
        if (e !== undefined) e.stopPropagation()
        // 日期范围
        if (this.range) {
          var bol = true
          for (var i = 0; i < this.rangeBegin.length; i++) {
            if (this.rangeBegin[i][0] === this.year && this.rangeBegin[i][1] === this.month && this.rangeBegin[i][2] === this.days[k1][k2].day) {
              this.rangeBegin.splice(i, 1)
              bol = false
            }
          }
          if (bol) {
            this.rangeBegin.push([this.year, this.month, this.days[k1][k2].day])
          }
          this.render(this.year, this.month)
          this.$emit('selectM', this.rangeBegin)
        }
      },
      // 删除选中的日期
      selectDel (val) {
        for (var k = 0; k < this.rangeBegin.length; k++) {
          var str = this.rangeBegin[k][0] + '-' + (this.rangeBegin[k][1] + 1) + '-' + this.rangeBegin[k][2]
          for (var i = 0; i < val.length; i++) {
            if (val[i] === str) {
              this.rangeBegin.splice(k, 1)
              k--
            }
          }
        }
        this.render(this.year, this.month)
        this.$emit('selectM', this.rangeBegin)
      },
      // 日期补零
      zeroPad (n) {
        return String(n < 10 ? '0' + n : n)
      }
    }
  }

</script>

<style scoped>
  .calendar {
    margin: auto;
    width: 100%;
    min-width: 300px;
    background: #fff;
    font-family: "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    user-select: none;
  }

  .calendar-tools {
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    color: #5e7a88;
  }

  .calendar-tools span {
    cursor: pointer;
  }

  .calendar-prev {
    width: 14.28571429%;
    float: left;
    text-align: center;
  }

  .calendar-info {
    padding-top: 3px;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
  }

  .calendar-info > div.month {
    margin: auto;
    height: 20px;
    width: 100px;
    text-align: center;
    color: #5e7a88;
    overflow: hidden;
    position: relative;
  }

  .calendar-info > div.month .month-inner {
    position: absolute;
    left: 0;
    top: 0;
    height: 240px;
    transition: top .5s cubic-bezier(0.075, 0.82, 0.165, 1);
  }

  .calendar-info > div.month .month-inner > span {
    display: block;
    height: 20px;
    width: 100px;
    text-align: center;
  }

  .calendar-info > div.year {
    font-size: 10px;
    line-height: 1;
    color: #999;
  }

  .calendar-next {
    width: 14.28571429%;
    float: right;
    text-align: center;
  }

  .calendar table {
    clear: both;
    width: 100%;
    margin-bottom: 10px;
    border-collapse: collapse;
    color: #444444;
  }

  .calendar td {
    margin: 2px !important;
    padding: 0px 0;
    width: 14.28571429%;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    vertical-align: top;
  }

  .calendar td.week {
    font-size: 10px;
    pointer-events: none !important;
    cursor: default !important;
  }

  .calendar td.disabled {
    color: #ccc;
    pointer-events: none !important;
    cursor: default !important;
  }

  .calendar td.disabled div {
    color: #ccc;
  }

  .calendar td span {
    display: block;
    max-width: 40px;
    height: 26px;
    font-size: 16px;
    line-height: 26px;
    margin: 0px auto;
    border-radius: 2px;
  }

  .calendar td:not(.selected) span:not(.red):hover {
    background: #f3f8fa;
    color: #444;
  }

  .calendar td:not(.selected) span.red:hover {
    background: #f9efef;
  }

  .calendar td:not(.disabled) span.red {
    color: #ea6151;
  }

  .calendar td.selected span {
    background-color: #5e7a88;
    color: #fff;
  }

  .calendar td .text {
    position: absolute;
    top: 28px;
    left: 0;
    width: 40px;
    text-align: center;
    border-radius: 2px;
    padding: 2px;
    font-size: 8px;
    line-height: 1.2;
    color: #444;
  }

  .calendar td .isGregorianFestival,
  .calendar td .isLunarFestival {
    color: #ea6151;
  }

  .calendar td.selected span.red {
    background-color: #ea6151;
    color: #fff;
  }

  .calendar td.selected span.red:hover {
    background-color: #ea6151;
    color: #fff;
  }

  .calendar thead td {
    text-transform: uppercase;
    height: 30px;
    vertical-align: middle;
  }

  .calendar-button {
    text-align: center;
  }

  .calendar-button span {
    cursor: pointer;
    display: inline-block;
    min-height: 1em;
    min-width: 5em;
    vertical-align: baseline;
    background: #5e7a88;
    color: #fff;
    margin: 0 .25em 0 0;
    padding: .6em 2em;
    font-size: 1em;
    line-height: 1em;
    text-align: center;
    border-radius: .3em;
  }

  .calendar-button span.cancel {
    background: #efefef;
    color: #666;
  }
</style>
